<template>
  <div class="container">
    <div class="navclas" style="margin-top: 5px">
      <a class="" style="border-radius: 4px; width: 68%; padding: 0 10px">
        <div class="van-field__left-icon" style="padding-top: 5px">
          <i
            class="van-icon van-icon-search"
            style="height: 1.1rem; color: #686869"
          ></i>
        </div>
        <input
          v-model="filter_name"
          type="search"
          placeholder="请输入标题"
          ref="inpt"
          style="font-size: 14px"
          class="van-field__control"
          @search="init"
        />
      </a>
      <a
        @click="publish"
        style="border-radius: 4px; width: 30%; margin-left: 2%"
        class="is-active"
        ><span style="font-size: 14px">我要发布</span></a
      >
    </div>
    <!-- <van-row type="flex" justify="space-around" align="center">
      <van-col style="width: 70%; border: 1px solid #dddddd; margin-top: 10px">
        <van-search
          v-model="filter_name"
          placeholder="请输入查询内容"
          clearable
          shape="round"
          @search="init"
        ></van-search>
      </van-col>
      <van-col>
        <div class="publish" style="margin-top: 10px">
          <span class="background-blue border-color-blue" @click="publish"
            >+发布
          </span>
        </div>
      </van-col>
    </van-row> -->
    <div>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div v-for="item in list" :key="item.id" :title="item">
          <van-row style="padding-top: 15px" @click="itemClick(item.id)">
            <van-col style="position: relative">
              <img
                :src="getSrc(item)"
                style="object-fit: cover"
                height="100px"
                width="100px"
              />
            </van-col>
            <van-col
              style="
                width: calc(100% - 100px);
                height: 100px;
                padding-left: 10px;
                display: flex;
                flex-direction: column;
              "
            >
              <div style="flex: 1">
                <van-cell
                  :title="item.title"
                  label-class="item"
                  title-class="title"
                  :label="item.detail"
                ></van-cell>
              </div>
              <div class="cell-div">
                <van-row type="flex" align="center" style="margin-top: 5px">
                  <!-- <van-icon name="info-tools" color="#EE3F00" size="22" /> -->
                  <van-col>
                    <van-tag
                      text-color="#fff"
                      size="large"
                      class="tag-blue"
                      v-if="item.workType.length > 0"
                      >{{ getHasWkType(item.workType[0]) }}</van-tag
                    >
                    <van-tag
                      text-color="#fff"
                      size="large"
                      class="tag-blue"
                      style="margin-left: 3px"
                      v-if="item.workType.length > 1"
                      >{{ getHasWkType([item.workType[1]]) }}</van-tag
                    >
                  </van-col>
                </van-row>
                <van-row
                  type="flex"
                  align="bottom"
                  justify="space-between"
                  style="margin-top: 5px; margin-left: 1px"
                >
                  <van-col>
                    <slot v-if="item.city && item.city.length > 6">
                      <span class="cell-span">{{
                        item.city.substring(0, 6) + '...'
                      }}</span>
                    </slot>
                    <slot v-else>
                      <span class="cell-span">{{
                        item.city || '地区未知'
                      }}</span>
                    </slot>
                  </van-col>
                  <van-col>
                    <span style="color: #ee3f00; margin-right: 3px">{{
                      item.staff
                    }}</span>
                    <span class="cell-span">人</span>
                  </van-col>
                  <van-col>
                    <span class="cell-span">{{
                      item.updateTime.substring(0, 10)
                    }}</span>
                  </van-col>
                </van-row>
              </div>
            </van-col>
          </van-row>
          <van-divider
            :style="{
              color: 'rgba(187, 187, 187, 0.38)',
              borderColor: 'rgba(187, 187, 187, 0.38)',
              padding: '15px 16px 0px 16px',
            }"
          ></van-divider>
          <van-row
            type="flex"
            justify="space-between"
            style="height: 36px"
            align="center"
            v-show="userId != -1"
          >
            <van-col style="padding-left: 10px">
              <span style="font-size: 12px; color: #ee3f00">{{
                item.status == -1 ? '撤销审核' : status[item.status]
              }}</span>
            </van-col>
            <van-col>
              <div style="padding-right: 4px">
                <span class="corner-span" @click="updateStatus(item, 'edit')">{{
                  item.status == -1
                    ? '提交审核'
                    : getNameByStatus(item.status, 'edit')
                }}</span>
                <span
                  style="margin-left: 10px"
                  class="corner-span"
                  v-if="item.status == 0 || item.status == 3"
                  @click="updateStatus(item, '')"
                  >{{ getNameByStatus(item.status, '') }}</span
                >
                <span style="margin-left: 10px"></span>
                <span class="corner-span" @click="deleteTeams(item.id)"
                  >删除</span
                >
              </div>
            </van-col>
          </van-row>
          <div style="height: 12px; width: 100%; background: #f0f1f4" />
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
import {
  Search,
  Row,
  Col,
  DropdownMenu,
  DropdownItem,
  List,
  Uploader,
  Popup,
  Area,
  Tag,
  Divider,
  Toast,
} from 'vant';
import { getLocalStorage } from '@/utils/local-storage';
import {
  listProject,
  updateProjectStatus,
  deleteProjectRecord,
  dicItems,
} from '@/api/api';
import areaList from '@/views/user/module-address-edit/area_all.json';
import logo_default from '@/assets/images/logo.jpg';
import scrollFixed from '@/mixin/scroll-fixed';

export default {
  mixins: [scrollFixed],
  data() {
    return {
      userId: getLocalStorage('userId').userId,
      areaList: areaList,
      address: '全国地区',
      list: [],
      loading: false,
      finished: false,
      logo_default: logo_default,
      page: 0,
      limit: 10,
      sale: false,
      filter_name: '',
      area_code: '',
      skill: -1,
      staff: -1,
      workType: [],
      option3: [
        {
          text: '人员',
          value: -1,
        },
        {
          text: '<20',
          value: 0,
        },
        {
          text: '20-50',
          value: 1,
        },
        {
          text: '>50',
          value: 2,
        },
      ],
      status: ['已下架', '待审核', '审核不通过', '已上线'],
      wkTypeId: 'INFO.WORK.TYPE',
    };
  },

  watch: {
    $route() {
      if (
        this.$route.query.userId != null &&
        this.$route.query.userId != undefined &&
        this.$route.query.userId != ''
      ) {
        this.userId = this.$route.query.userId;
      }
      this.init();
    },
  },

  created() {
    this.initArea();
    this.initWkType();
    if (
      this.$route.query.userId != null &&
      this.$route.query.userId != undefined &&
      this.$route.query.userId != ''
    ) {
      this.userId = this.$route.query.userId;
    }
  },

  methods: {
    initArea() {
      let area = this.$store.getters.getArea;
      if (area.code != null) {
        //this.area_code = area.code;
        //this.address = area.city;
      }
    },
    //0 下架     1待审核    2审核不通过   3下架
    getNameByStatus(status, type) {
      if (type == 'edit') {
        if (status == 1) {
          //待审核
          return '取消审核';
        } else {
          //审核不通过
          return '编辑';
        }
      } else {
        if (status == 0) {
          //下架
          return '上架';
        } else {
          //已上架
          return '下架';
        }
      }
    },
    getHasWkType(wktype_value) {
      for (let i in this.workType) {
        if (wktype_value == this.workType[i].value) {
          return this.workType[i].text;
        }
      }
    },
    initWkType() {
      dicItems({
        groupId: this.wkTypeId,
      })
        .then((res) => {
          let list = res.data.data.list;
          for (let i in list) {
            let opiton = {
              text: list[i].itemName,
              value: parseInt(list[i].itemValue),
            };
            this.workType.push(opiton);
          }
        })
        .catch(() => {});
    },
    updateStatus: function (item, type) {
      let message = '';
      let status1 = item.status;
      if (type == 'edit') {
        if (status1 == 1) {
          //待审核
          status1 = -1;
          message = '确定要取消审核吗?';
        } else if (status1 == -1) {
          //提交审核
          status1 = 1;
          message = '确定要提交审核吗?';
        } else {
          //编辑
          this.$router.push(`/info/project-publish/${item.id}`);
          return;
        }
      } else {
        if (status1 == 0) {
          //下架
          status1 = 1;
          message = '确定要上架吗?';
        } else {
          //上架
          status1 = 0;
          message = '确定要下架吗?';
        }
      }
      this.$dialog
        .confirm({
          message: message,
          cancelButtonText: '再想想',
        })
        .then(() =>
          updateProjectStatus({
            id: item.id,
            status: status1,
          })
            .then((res) => {
              item.status = status1;
              return this.$dialog.alert({
                message: '更新成功',
              });
            })
            .catch((err) => {
              return this.$dialog.alert({
                message: '更新失败',
              });
            })
        );
    },
    deleteTeams: function (id, index) {
      let message = '确定要删除吗?';
      this.$dialog
        .confirm({
          message: message,
          cancelButtonText: '再想想',
        })
        .then(() =>
          deleteProjectRecord({
            id: id,
          })
            .then((res) => {
              this.list.splice(index, 1);
              return this.$dialog.alert({
                message: '删除成功',
              });
            })
            .catch((err) => {
              this.$dialog.alert({
                message: err.data.errmsg,
              });
            })
        );
    },
    getDate(item) {
      let time = '——';
      if (item.startDate != undefined && item.endDate != undefined) {
        let s1 = new Date(item.startDate.replace(/-/g, '/'));
        let s2 = new Date(item.endDate.replace(/-/g, '/'));
        var days = s2.getTime() - s1.getTime();
        time = parseInt(days / (1000 * 60 * 60 * 24));
      }
      return time;
    },
    publish() {
      this.$router.push('/info/project-publish/-1');
    },
    itemClick(id) {
      this.$router.push(`/info/project-detail/${id}`);
    },
    getSrc(item) {
      let image = logo_default;
      if (item.imgUrl != null && item.imgUrl != '') {
        image = item.imgUrl;
      }
      return image;
    },
    addConfirm(e) {
      if (e[0].code == '100000') {
        this.area_code = '';
        this.address = '全国地区';
      } else {
        this.area_code = e[1].code;
        this.address = e[1].name;
      }
      this.show = false;
      this.changeItem();
      this.$refs.area_item.toggle();
    },
    hideAreaItem() {
      this.$refs.area_item.toggle();
    },
    changeItem() {
      this.page = 0;
      this.list = [];
      this.onLoad();
    },

    init() {
      this.page = 0;
      this.list = [];
      this.onLoad();
    },

    onLoad() {
      if (this.userId == -1) {
        this.loading = false;
        this.finished = true;
        return;
      }
      if (this.page != 0 && this.list.length < 10) {
        this.page = 0;
        this.list = [];
      }
      this.page++;
      listProject({
        page: this.page,
        limit: this.limit,
        filtername: this.filter_name,
        areaCode: this.area_code,
        skill: this.skill,
        staff: this.staff,
        projectId: -1,
        userId: Number(this.userId),
        sort: 'update_time',
      })
        .then((res) => {
          this.list.push(...res.data.data.list);
          this.loading = false;
          this.finished = res.data.data.page >= res.data.data.pages;
        })
        .catch((e) => {
          this.page--;
          this.loading = false;
          this.finished = true;
        });
    },
  },
  components: {
    [Search.name]: Search,
    [Row.name]: Row,
    [Col.name]: Col,
    [List.name]: List,
    [Popup.name]: Popup,
    [Area.name]: Area,
    [Tag.name]: Tag,
    [Divider.name]: Divider,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
  },
};
</script>

<style lang="scss" scoped>
/deep/ .van-picker__cancel,
/deep/ .van-picker__confirm {
  color: #ee3f00;
}
.van-tag--large {
  font-size: 12px !important;
  padding: 2px 4px !important;
}
.navclas {
  display: flex;
  height: 50px;
  background-color: white;
  font-weight: bolder;
  padding: 0 15px;
  padding-top: 10px;
  box-sizing: border-box;

  > a {
    border: 1px solid #0397fb;

    // flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .is-active {
    color: white;
    background-color: #0397fb;
  }
}
.van-search__content--round {
  border-radius: 0px !important;
}

.select_area /deep/ .van-picker__toolbar {
  width: 100%;
  position: absolute;
  bottom: -44px;
}

.select_area /deep/ .van-picker__columns {
  margin-bottom: 44px;
}

// .van-cell >>> .van-field__control[type='search'] {
//   height: 30px;
// }

.cell-div {
  // position: absolute;
  bottom: 0;
  width: 100%;
}

.cell-div span {
  color: #bbbbbb;
}

.spanafter {
  position: relative;
  padding: 0 8px;
  line-height: 18px;
}

.spanafter::after {
  position: absolute;
  top: 50%;
  right: -4px;
  margin-top: -5px;
  border: 3px solid;
  border-color: transparent transparent currentColor currentColor;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  opacity: 0.8;
  content: '';
}

.address {
  text-align: center;
  height: 36px;
  line-height: 36px;
  color: #323233;
  font-size: 15px;
}

.container {
  background-color: white;

  .van-row {
    padding: 0px 16px;

    .van-row {
      padding: 0px;
    }
  }
}

.van-divider {
  margin: 0px;
  padding-top: 15px;
}

.corner-span {
  width: 40px;
  height: 20px;
  // background-color: #EE3F00;
  border: 1px solid #ee3f00;
  border-radius: 5px;
  font-size: 12px;
  padding: 2px 8px;
}

.van-search {
  padding: 0px;
}

.title {
  font-weight: bold;
}

.title {
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
  -webkit-line-clamp: 1;
  white-space: normal;
  overflow: hidden;
  color: #969799;
  font-size: 12px;
  font-weight: normal;
  margin-top: 0;
}

.publish {
  line-height: 40px;
  width: 54px;
  text-align: end;
}

.publish span {
  width: 60px;
  height: 30px;
  background-color: #ee3f00;
  border: 1px solid #ee3f00;
  border-radius: 4px;
  font-size: 13px;
  padding: 5px 6px;
  color: white;
}

.van-cell {
  padding: 0px;
}

.cell-span {
  color: #969799;
  font-size: 12px;
}
</style>
